<template>
  <section>
    <div class="side-bar">
      <div class="left-title" v-if="!isCollapse">
        <div class="logo"></div>
        {{$t("navBarName")}}
      </div>
      <div class="left-title left-title-image" v-else>
        <div class="image"></div>
        <!-- <img class="image" :src="LogoWhite"/> -->
      </div>
      <div class="side-bar-menu">
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" :router="true" :default-active="selectedPath">
          <template v-for="(menu,index) in menuList">
            <template v-if="menu.children.length>0">
              <el-submenu :index="index.toString()" :key="index">
                <template slot="title">
                    <i :class="[menu.icon]" :style="`font-size: ${fontSize}`"></i>
                    <span slot="title" :class="[]">{{menu.name}}</span>
                </template>
                <template v-for="(child,childIndex) in menu.children">
                    <template v-if="child.children.length>0" >
                        <side-bar-item :key="childIndex" :menu="child" :path="selectedPath" :index="`${index}-${childIndex.toString()}`"></side-bar-item>
                    </template>
                    <el-menu-item v-else :index="child.path" :key="childIndex" :class="[getActive(child)?'is-active-sidebar':'', 'no-select']">
                        <i :class="child.icon" :style="`font-size: ${fontSize}`"></i>
                        <span slot="title">{{child.name}}</span>
                    </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <el-menu-item v-else :index="menu.path" :key="index" :class="[getActive(menu)?'is-active-sidebar':'', 'no-select']">
                <i :class="menu.icon" :style="`font-size: ${fontSize}`"></i>
                <span slot="title">{{menu.name}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
  </section>
</template>
<script>

/*#region 导入函数*/
// import menus from "../menus";
import {MenuAPI} from "../../../../modules/xtp";
import { mapGetters } from "vuex";
import LogoWhite from "../../../../assets/images/logo-white.png";
import SideBarItem from "./side-bar-item.vue";

/*#endregion*/

export default{
  name: "SideBar",
  methods: {

    /*#region 自定义函数(组件change事件等)*/
    collapse: function () {
      this.$store.dispatch("changeIsCollapse");
    },
    setChildren(item, allMenuList) {
      const childrenList = [];
      allMenuList.map((allItem, allIndex) => {
        allItem.path = allItem.url;
        if (allItem.parentId === item.id) {
          if (allItem.displayFlag) {childrenList.push(allItem);}
        }
      });
      childrenList.sort(function (a, b) {
        return a.sort - b.sort;
      });
      item.children = childrenList;
      if (item.children.length > 0) {
        item.children.map((childItem, childIndex) => {
          this.setChildren(childItem, allMenuList);
        });
      }
    },

    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/

    /*#endregion*/

    /*#region 获取数据*/
     getActive(menu) {
        let active = false;
        const _this = this;
        const setChildren = function(item) {
            if(item.path === _this.selectedPath) {
                active = true;
                return true;
            }
            if (item.children && item.children.length > 0) {
              item.children.map((childItem) => {
                setChildren(childItem);
              });
            }
        };
        if(menu && menu.path === _this.selectedPath) {
            active = true;
            return active;
        } else {
            menu.children && menu.children.map((child) => {
                setChildren(child);
            });
            return active;
        }
    }

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/
  created() {
    this.selectedPath = this.$route.path;
    // this.$store.dispatch("getMenuList", {params: {locale: this.$i18n.locale, module: "PC"}, Vue: this});
  },

  /*#endregion*/

  /*#region 注册绑定数据*/

  components: {
    SideBarItem
  },
  computed: {
    ...mapGetters(["isCollapse"]),
    menuList () {
      return this.$store.getters.menuList;
    },
    theme() {
      return this.$store.getters.theme || "default"
    },
    fontSize() {
      return this.isCollapse?"20px":"16px"
    }
  },
  data() {
    return {
      LogoWhite,
      allMenuList: [],
      menuLoading: false,
      systemName: this.$t("navBarName"),
      selectedPath: ""
    }
  },
  watch: {
    $route(value) {
      this.selectedPath = value.path;
    }
  }

  /*#endregion */

}
</script>
<style scoped lang="scss">
  @import "../../../../assets/styles/scss/views/base/home/side-bar.scss";
  /*必须要在这里导入,否则无法更改el组件的样式*/
</style>
<style scoped lang="scss">
.is-active-sidebar{
    background-color: #1e88e5;
    color: #ffffff;
    & .fa, span{
        color: #ffffff;
    }
    &:hover, &:active, &:focus{
        color: #1e88e5;
        background-color: #e3f2fd;
        & .fa, span{
            color: #1e88e5;
        }
    }


}
.no-select{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
</style>
